<template>
	<div>
		<div>
			<el-input class="searchInput"
					clearable
					@clear="keywordClear"
					v-model="keyword"
					placeholder="搜索学生实习记录..."
					@keydown.enter.native="doSearch"
					prefix-icon="el-icon-search">
			</el-input>
			<el-button icon="el-icon-search"
					type="primary"
					@click="doSearch">搜索</el-button>
		</div>
		<div style="margin-top: 10px">
			<el-table :data="studentRecord"
					stripe
					border
					style="width: 63%">
				<el-table-column prop="studentId"
								label="学号"
								width="130">
				</el-table-column>
				<el-table-column prop="sname"
								label="姓名"
								width="80">
				</el-table-column>
				<el-table-column prop="gender"
								label="性别"
								width="60">
				</el-table-column>
				<el-table-column prop="mname"
								label="专业"
								width="150">
				</el-table-column>
				<el-table-column prop="level"
								label="学级"
								width="60">
				</el-table-column>
				<el-table-column prop="cname"
								label="班级"
								width="100">
				</el-table-column>
				<el-table-column prop="pname"
								label="实习岗位"
								width="115">
				</el-table-column>
				<el-table-column prop="createTime"
								label="开始实习时间">
				</el-table-column>
			</el-table>
		</div>
		<div style="width: 63%; display: flex; justify-content: flex-end;">
			<el-pagination @current-change="currentChange"
						:current-page="current"
						:page-size="size"
						layout="total, prev, pager, next"
						:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				studentRecord: [],
				keyword: "",
				current: 1,
				size: 10,
				total: 0
			};
		},
		mounted() {
			this.initRecord();
		},
		methods: {
			initRecord() {
				let url =
					"/practice/record/?current=" +
					this.current +
					"&size=" +
					this.size +
					"&keyword=" +
					this.keyword;
				this.getRequest(url).then(resp => {
					if (resp) {
						this.studentRecord = resp.data;
						this.total = resp.total;
					}
				});
			},
			keywordClear() {
				this.current = 1;
				this.initRecord();
			},
			doSearch() {
				this.current = 1;
				this.initRecord();
			},
			currentChange(val) {
				this.current = val;
				this.initRecord();
			}
		}
	};
</script>

<style scoped>
	.searchInput {
		width: 300px;
		margin-right: 8px;
	}
</style>